<template>
	<view class="content">
		<view class="infoBox">
			<view class="top">
				<view class="left">
					<view class="txt">
						可提现余额(元)
					</view>
					<view class="num">
						{{userInfo.balance/100 || 0}}
					</view>
				</view>
				<view class="right">
					<view class="rightItem" @click="goNavi('提现')">
						提现记录
					</view>
					<view class="rightItem" @click="goNavi('明细')">
						余额明细
					</view>
				</view>
			</view>
			<view class="middle">
				<view class="title">
					提现金额
				</view>
				<view class="inputGroup">
					<view class="left">
						<view class="icon">
							￥
						</view>
						<view class="input">
							<u--input type="digit" placeholder="输入提现金额，最低提现1元" border="none" v-model="inputValue"
								@input="onInput" clearable>
							</u--input>
						</view>
					</view>
					<view class="allReflect" @click="allReflect">
						全部提现
					</view>
				</view>
			</view>
		</view>
		<view class="bankCard">
			<view class="title">
				到账银行卡
			</view>
			<view class="cardInfo">
				<view class="information">
					<view class="infoItem">
						<view class="label">
							开户姓名
						</view>
						<view class="value" v-show="!inputShow">
							{{userInfo.accountName}}
						</view>

						<u--input class="value2" border="bottom" v-show="inputShow" v-model="FormData.accountName">
						</u--input>
					</view>
					<view class="infoItem">
						<view class="label">
							开户银行
						</view>
						<view class="value" v-show="!inputShow">
							{{userInfo.blank}}
						</view>

						<u--input class="value2" border="bottom" v-show="inputShow" v-model="FormData.blank">

						</u--input>
					</view>
					<view class="infoItem">
						<view class="label">
							银行卡号
						</view>
						<view class="value" v-show="!inputShow">
							{{userInfo.blankCardNo}}
						</view>

						<u--input class="value2" border="bottom" v-show="inputShow" v-model="FormData.blankCardNo">
						</u--input>
					</view>
				</view>

				<view class="edit" @click="onEdit" v-show="!inputShow">
					修改
					<image src="../../static/reflect/edit.png" mode=""></image>
				</view>

				<view class="edit flex-sty" v-show="inputShow">
					<view class="float" @click="onClose">
						取消
						<image src="../../static/reflect/edit.png" mode=""></image>
					</view>

					<view class="float" @click="onSubmit">
						确认
						<image src="../../static/reflect/edit.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="applyBtn" @click="onWithdraw">
			立即提现
		</view>
	</view>
</template>

<script>
	import {
		userBalance,
		updateBlankCard,
		onTransfer
	} from '@/api/apis.js';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				inputValue: '', // 提现金额
				balance: "", //
				userInfo: {},
				FormData: {
					"accountName": "",
					"blank": "",
					"blankCardNo": "",
				},
				inputShow: false,


			};
		},
		mounted() {
			this.onSearch()
		},
		onLoad() {},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},

		methods: {
			onSearch() {
				let params = {
					customerId: this.Info.id,
				}
				userBalance(params).then(res => {
					console.log(res);
					this.userInfo = res.result
				})
			},

			// 输入数字时。自动抹除首位0，小数点后两位
			onInput() {
				let that = this
				// let num = String(this.inputValue).replace(/^(-)(\d+).(\d\d).$/, '$1$2.$3').replace(/[^\d.]/g, '')
				let num = that.inputValue.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
					.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
					.replace(/^(-)*(\d+)\.(\d{0,2}).*$/, '$1$2.$3'); // 只能输入两个小数
				num = num.replace(/^0+([1-9]+)/, '$1')
				// num = num.replace(/^(?!.*\..*$)0(\d+)$/, '$1')
				let balance = Number(that.userInfo.balance) / 100
				if (Number(num) > balance) {
					that.$nextTick(() => {
						that.inputValue = balance
					})
				} else {
					that.$nextTick(() => {
						that.inputValue = num
					})
				}
			},
			allReflect() {
				this.inputValue = Number(this.userInfo.balance) / 100
			},

			//打开编辑
			onEdit() {
				this.inputShow = true
				this.FormData = {
					...this.userInfo
				}
				console.log(this.FormData);
			},

			// 保存
			onSubmit() {
				if (!this.FormData.accountName) {
					uni.showToast({
						title: "请填写开户姓名",
						icon: 'none'
					})
					return
				}

				if (!this.FormData.blank) {
					uni.showToast({
						title: "请填写开户银行",
						icon: 'none'
					})
					return
				}

				if (!this.FormData.blankCardNo) {
					uni.showToast({
						title: "请填写银行卡号",
						icon: 'none'
					})
					return
				}


				let params = {
					"accountName": this.FormData.accountName,
					"blank": this.FormData.blank,
					"blankCardNo": this.FormData.blankCardNo,
					"customerId": this.Info.id
				}
				updateBlankCard(params).then(res => {
					console.log(res);
					if (res.success) {
						uni.showToast({
							title: "修改成功",
							icon: 'success'
						})
						this.onSearch()
					}
				}).finally(() => {
					this.onClose()
				})
			},

			onClose() {
				this.inputShow = false
			},

			onWithdraw() {
				if (this.inputShow) {
					uni.showToast({
						title: "请先保存银行卡信息",
						icon: 'none'
					})

					return
				}
				if (this.inputValue == "" || Number(this.inputValue) > Number(this.userInfo.balance)) {
					console.log(this.inputValue, 'inputValue')
					uni.showToast({
						title: "请正确填写金额",
						icon: 'none'
					})
					return
				} else if (this.inputValue == 0) {
					uni.showToast({
						title: "金额不能为0",
						icon: 'none'
					})
					return
				} else if (this.userInfo.accountName == "") {
					console.log(this.userInfo);
					uni.showToast({
						title: "请填写开户姓名",
						icon: 'none'
					})
					return
				} else if (this.userInfo.blank == "") {
					uni.showToast({
						title: "请填写开户银行",
						icon: 'none'
					})
					return
				} else if (this.userInfo.blankCardNo == "") {
					uni.showToast({
						title: "请填写银行卡号",
						icon: 'none'
					})
					return
				}
				let params = {
					...this.userInfo,
					customerId: this.Info.id,
					transferAmount: this.inputValue * 100
				}

				onTransfer(params).then(res => {
					uni.showToast({
						title: "提现成功",
						icon: 'success'
					})
					this.onSearch()
					this.inputValue = ''
				})
			},

			goNavi(type) {
				if (type == '提现') {
					uni.navigateTo({
						url: "/pages/record/record"
					})
				} else {
					uni.navigateTo({
						url: "/pages/detailed/detailed"
					})
				}
			},
		},

	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(to bottom, #FFEBEC, #F7F7F7, #F7F7F7);
	}
</style>
<style lang="scss" scoped>
	.content {
		// padding: 30rpx 30rpx 70rpx 30rpx;

		padding-top: 30rpx;

		.infoBox {
			background-color: #FEE4C1;
			border-radius: 30rpx;
			padding-bottom: 25rpx;
			margin: 0 30rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 50rpx 25rpx 30rpx 45rpx;

				.left {
					.num {
						color: #865A29;
						font-size: 60rpx;
						font-weight: bold;
					}

					.txt {
						font-size: 27rpx;
						margin: 0 0 12rpx 0;
					}
				}

				.right {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30rpx;

					.rightItem {
						padding: 6rpx 15rpx;
						background-color: #FFF;
						border-radius: 10rpx;
						margin-left: 15rpx;
					}
				}
			}

			.middle {
				padding: 35rpx 30rpx;
				margin: 0 25rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.title {
					font-size: 26rpx;
				}

				.inputGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 35rpx;

					.left {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						width: 75%;

						.icon {
							font-weight: bold;
							font-size: 35rpx;
							margin-right: 15rpx;
						}

						// ::v-deep .u-input{
						// 	width: 100% !important;
						// }
						.input {
							width: 100%;
						}
					}

					.allReflect {
						font-size: 28rpx;
						color: $uni-text-color-red;
					}
				}
			}

		}

		.bankCard {
			margin: 0 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				margin: 30rpx 0;
			}

			.cardInfo {
				background-color: #fff;
				padding: 30rpx 25rpx;
				border-radius: 25rpx;

				.information {
					border-bottom: 1px solid #D9D9D9;

					.infoItem {
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;

						&:first-of-type {
							margin-top: 0;
						}

						.label {
							color: #8C8EA0;
						}

						.value {}

						.value2 {
							width: 200rpx !important;
						}
					}
				}

				.edit {
					display: flex;
					align-items: center;
					justify-content: center;
					padding-top: 25rpx;
					font-size: 30rpx;
					color: #8C8EA0;

					image {
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
						display: block;
					}
				}

				.flex-sty {
					justify-content: space-evenly;

					.float {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		.applyBtn {
			margin: 0 30rpx;
			margin-top: 25rpx;
			background-image: linear-gradient(to right, #FF2928, #FD702B);
			color: #fff;
			text-align: center;
			padding: 25rpx 0;
			border-radius: 20rpx;
			font-size: 26rpx;
		}
	}
</style>